<!--
	jQuery Mobile Boilerplate
	/snippets/collapsible-sets.html
-->
<!doctype html>
<html>
<head>
	<title> jQuery Mobile Boilerplate </title>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- jQuery Mobile CSS bits -->
	<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />

	<!-- if you have a custom theme, add it here -->
	<link rel="stylesheet"  href="/themes/jQuery-Mobile-Boilerplate.css" />

	<!-- Custom css -->
	<link rel="stylesheet" href="/css/custom.css" />

	<!-- Javascript includes -->
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="/js/mobileinit.js"></script>
	<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
	<script src="/js/application.js"></script>
</head> 
<body> 
	<div data-role="page">

		<div data-role="header">
			<a href="../index.html" data-icon="home">Home</a>
			<h1>Collapsible Sets</h1>
		</div>

		<div data-role="content">




<h2>Collapsible Sets</h2>

<div data-role="collapsible-set">
	<div data-role="collapsible" data-collapsed="false">
		<h3>Section 1</h3>
		<p>I'm the collapsible content in a set so this feels like an accordion.</p>
	</div>
	<div data-role="collapsible">
		<h3>Section 2</h3>
		<p>I'm the collapsible content in a set so this feels like an accordion.</p>
	</div>
	<div data-role="collapsible">
		<h3>Section 3</h3>
		<p>I'm the collapsible content in a set so this feels like an accordion.</p>

	</div>
</div>

<h2>Theming Sets</h2>

<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
	<div data-role="collapsible" data-collapsed="false">
		<h3>Section 1</h3>
		<p>I'm the collapsible content in a set so this feels like an accordion.</p>
	</div>
	<div data-role="collapsible">
		<h3>Section 2</h3>
		<p>I'm the collapsible content in a set so this feels like an accordion.</p>
	</div>
	<div data-role="collapsible">
		<h3>Section 3</h3>
		<p>I'm the collapsible content in a set so this feels like an accordion.</p>

	</div>
</div>




		</div>
		
		<div data-role="footer" data-theme="c">
			<p>&copy; 2012 - jQuery Mobile Boilerplate</p>
		</div>	
		
	</div>
</body>
</html>